// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.notification-banner-v2 {
  @_top: notification-banner-v2;
  @_bar-width: 3px;
  @_padding: 5px;
  @_margin: 10px;

  display: flex;
  padding: 5px;
  font-size: @font-size--normal;
  color: #fff;
  background-color: fade(@red-darker, 40%);
  z-index: @z-index--notification-banner-v2;
  flex-direction: column;
  text-align: center;
  position: relative;
  --divider-colour: @red;
  --icon: url("~@images/layout/exclamation-icon.svg");

  @media @desktop {
    flex-direction: row;
    border-radius: 40px;
    text-align: left;
  }

  &--info {
    background-color: hsla(var(--hsl-blue-3), 0.2);
    --divider-colour: hsl(var(--hsl-blue-2));
  }

  &__col {
    margin: @_padding;

    &--icon {
      height: 30px;

      @media @desktop {
        height: auto;
        width: 30px;
      }

      flex: none;
      background-position: center;
      background-repeat: no-repeat;
      background-image: var(--icon);
    }

    &--label {
      flex: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;

      // own padding + bar paddings (both sides)
      padding-bottom: (@_padding * 2 + @_bar-width);

      @media @desktop {
        // horizontal edition
        padding-right: (@_padding * 3 + @_bar-width);
        padding-bottom: 0;
      }

      &::after {
        position: absolute;
        content: "";
        height: @_bar-width;
        background-color: var(--divider-colour);
        border-radius: 10px;

        left: 0;
        bottom: 0;
        right: 0;

        @media @desktop {
          width: @_bar-width;
          height: auto;
          top: 0;
          left: auto;
        }
      }
    }
  }

  &__type {
    font-weight: bold;
    text-transform: capitalize;
  }

  &__text {
    a {
      .link-yellow();
    }
  }
}
